import {saveState, getSettingsSound, getState, fetchState, setStateMs} from "./state.js";
import {clearRankHighlight, highlightAllRankTill, onRankClick} from "./common.js";

function playSound() {
    let audio = new Audio(getSettingsSound());

    if (audio.volume < 1.0) {
        audio.volume = Math.min(1.0, audio.volume + 0.1);
    }
    audio.play().then(play => {
        // console.log(play);
    });

    audio.addEventListener('timeupdate', () => {
        countdown = (audio.currentTime / audio.duration) * 100;
    });

    audio.addEventListener('ended', () => {
        console.log("Ended");
    });
}

function closeAndOpenLastTab(){
    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
        fetchState().then(async state => {
            if(state.lastTabId > 0){
                chrome.tabs.update(state.lastTabId, { active: true }, (tab) => {})
                await saveState(state);
                chrome.tabs.remove(tabs[0].id);
            }
        })
    });
}

function onLoad() {

    let btnRepeat = document.querySelector("#BtnRepeat");
        btnRepeat.removeEventListener("click", repeatAndOpenLastTab);
        btnRepeat.addEventListener("click", repeatAndOpenLastTab);

    let btnClose = document.querySelector("#BtnClose");
        btnClose.addEventListener("click", closeAndOpenLastTab);
    if(getState){
        fetchState().then(async state => {
            state.projects.filter(row => row.on).forEach(row => {
                btnClose.style.backgroundColor = row.color;
                let body = document.querySelector("body");
                    body.style.backgroundImage = "url("+row.doneBg+")";
                    body.setAttribute("class", row.className);
                let iconBlock = document
                    .getElementById("PlayIcon")
                    .getElementsByClassName("icon")
                    .item(0);
                iconBlock.classList.add(state.sound);
                iconBlock.style.backgroundImage = "url("+row.icon+")";
            });
            if(state.play){
                playSound();
                state.play = false;
                await saveState(state)
            }
            setTimeout(countDownUpdate, 100);
        });
    }
    document.querySelector(".rate").removeEventListener("mouseout", clearRankHighlight);
    document.querySelector(".rate").addEventListener("mouseout", clearRankHighlight);
    document.querySelectorAll("[data-rank]").forEach(element => {
        element.removeEventListener('mouseover', highlightAllRankTill);
        element.addEventListener('mouseover', highlightAllRankTill);

        element.removeEventListener('click', onRankClick);
        element.addEventListener('click', onRankClick);
    })
}


function repeatAndOpenLastTab(){
    fetchState().then(async state => {
        await setStateMs(state.formula);
        await closeAndOpenLastTab();
    });
}

let countdown = -1;

function countDownUpdate() {
    document.getElementById("CircleOffset").style.strokeDashoffset = "calc(440 - (440 * " + countdown + ")/100)";
    setTimeout(countDownUpdate, 100);
}

onLoad();